import React, { Component } from 'react'
import Cookie from 'js-cookie'
import {connect} from 'react-redux'
import {Navigate} from 'react-router-dom'
import {
    List,
    Button
 } from 'antd-mobile'
 import {userInfo} from '../../store/actions/userInfo'
import './index.scss'
class Personal extends Component {
    state={
        isQuit:false
    }
    info=this.props.userInfo.info
    quit=()=>{
        this.setState({isQuit:true},()=>{
            this.props.setUserInfo({})
        })
        Cookie.remove('userid') 
        this.props.verify.v=false
    }
    render() {
        return (
            <div className="personal">
                {this.state.isQuit?<Navigate to='/login'></Navigate>:''}
                <div className="personal_top">
                    <div> <img src={require(`../../assets/images/${this.info.header}.png`).default} alt="" /></div>
                    <h2>{this.info.username}</h2>
                    <p>{this.info.company}</p>
                </div>
                <div className="personal_title">
                    <p>相关信息</p>
                </div>
                <List
                style={{
                    '--border-inner': 'none',
                    '--border-top': '1px solid red', 
                    '--border-bottom': '1px solid blue',
                }}
                mode="card"
                >
                    <List.Item style={{fontSize:"15px",color:'#888'}}> 职位:{this.info.post}</List.Item>
                    <List.Item style={{fontSize:"15px",color:'#888'}}>简介:{this.info.info}</List.Item>
                    <List.Item style={{fontSize:"15px",color:'#888'}}>薪资:{this.info.salary}</List.Item>
                </List>
                <Button block color="danger" onClick={this.quit}>退出</Button>
            </div>
        )
    }
}
export default connect(
    state=>(
        {
        userInfo:state.userInfo
        }),
        {
            setUserInfo:userInfo
        })(Personal)